import {  Comp1  } from './Comp1.js'
import {  Comp2  } from './Comp2.js'
import {  Comp3  } from './Comp3.js'

const List = {
    template:`
        <div>
            <ul>
                <li 
                    @click="handleClick(value)"
                    v-for="(value,key) in comps"
                >
                    {{value}}
                </li>
            </ul>
            <component :is="currentComp"></component>
        </div>
    `,
    data(){
        return {
            currentComp: Comp3,
            comps:[
                "Comp1",
                "Comp2",
                "Comp3"
            ]
        }
    },
    components: {
        Comp1,
        Comp2,
        Comp3
    },
    methods: {
        handleClick(value){
            console.log(value)
            this.currentComp = value
       }
    }
}


export default List